<template>
  <div class="userAccount">
    <div class="nav" />
    <div class="user-Info">
      <!-- 用户信息区域 -->
      <div class="use-InfoDetail">
        <div class="user-Info-avatar">
          <img class="img" :src="getUserProfile.avatarUrl + '?param=200y200'" alt="">

        </div>
        <!-- 用户信息部分 -->
        <div class="user-top-bottom">
          <!-- 上半部分 -->
          <div class="user-top">
            <div class="nickname"> {{getUserProfile.nickname}}</div>
            <div class="user-Info-text">
              <!-- 左侧信息 -->
              <div class="text-right">
                <div class="gender">
                  <span v-show="getUserProfile.gender==1" class="iconfont icon-sexm"></span>
                  <span v-show="getUserProfile.gender==2" class="iconfont icon-sexw"></span>
                </div>

                <div class="level">Lv{{UserDetail.level}}</div>
                <div v-if="haveIdentify" class="identify"><img :src="getidentify.imageUrl" />
                  <p>{{getidentify.imageDesc}}</p>
                </div>
              </div>
              <!-- 右侧按钮组 -->
              <div class="btn-group">
                <!-- <el-button v-if="!getUserProfile.followed" icon="el-icon-plus" round>关注</el-button>
                <el-button v-if="getUserProfile.followed" icon="el-icon-close" round>取消关注</el-button>
                <el-button icon="el-icon-edit" round>编辑个人信息</el-button> -->
                <!-- v-show="isMySelf" -->
              </div>
            </div>
          </div>
          <!-- 下半部分 -->
          <div class="user-bottom">
            <div class="about-info">
              <div class="dynamic">
                <p class="number">{{getUserProfile.eventCount}}</p>
                <p class="name">动态</p>
              </div>
              <div class="attetion">
                <p class="number">{{getUserProfile.follows}}</p>
                <p class="name">关注</p>
              </div>
              <div class="follow">
                <p class="number">{{getUserProfile.followeds}}</p>
                <p class="name">粉丝</p>
              </div>
            </div>

            <div class="introduction">
              <input id="check" type="checkbox" />
              <div class="element">
                <div class="text" style="max-width: 500px">
                  <p>个人介绍:</p>
                  <p>{{getsignature}}</p>
                </div>
              </div>
              <label for="check" class="check-in">
                <i class="el-icon-arrow-down"></i>
              </label>
              <label for="check" class="check-out">
                <i class="el-icon-arrow-up"></i>
              </label>
            </div>
          </div>
        </div>
      </div>
      <!-- 用户歌单区域 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="创建的歌单" name="first">
          <div class="User-playlist">
            <playlistitem class="User-playlist-item" :playitem="item" v-for="(item,index) in createplaylist"
              :key="index" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="收藏的歌单" name="second">
          <div class="User-playlist">
            <playlistitem class="User-playlist-item" :playitem="item" v-for="(item,index) in collectplaylist"
              :key="index" />
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getuserAPI, getuserplaylistAPI } from "@/api/user";
import playlistitem from "@/components/playlist-item/index";
export default {
  name: "userAccount",
  //import引入的组件需要注入到对象中才能使用
  components: { playlistitem },
  props: {
    // 用户id
    id: {
      require: true,
    },
  },
  data() {
    //这里存放数据
    return {
      isMySelf: false,
      UserDetail: "",
      // 标签页
      activeName: "first",
      haveIdentify: false,

      // 歌单数据
      playlist: [],
      // 用户创建的歌单
      createplaylist: [],
      // 用户收藏的歌单
      collectplaylist: [],
    };
  },
  //计算属性 类似于data概念
  computed: {
    // 解决普通用户没有认证
    getidentify() {
      if (this.UserDetail.identify) {
        console.log("有身份认证");
        return this.UserDetail.identify;
      }
      return { imageUrl: "", imageDesc: "" };
    },
    getsignature() {
      if (this.UserDetail.profile) {
        if (this.UserDetail.profile.signature == "") {
          return "暂无介绍";
        }
        return this.UserDetail.profile.signature;
      }
      return "暂无介绍";
    },
    getUserProfile() {
      if (this.UserDetail.profile) {
        return this.UserDetail.profile;
      }
      return this.UserDetail.profile || "";
    },
  },
  //监控data中的数据变化
  watch: {
    id() {
      this.getuser();
    },
  },
  //方法集合
  methods: {
    getUserDetail() {
      if (this.id == this.$store.state.UserInfo.account.id) {
        this.UserDetail = this.$store.state.PersonAccount.data;
        this.isMySelf = true;
      } else {
        this.getuser();
      }
    },
    async getuser() {
      const data = await getuserAPI(this.id);
      // console.log("获取用户资料", data);
      this.UserDetail = data.data;
      document.title = "用户 - " + this.UserDetail.profile.nickname;
      // 判断认证勋章
      if (this.UserDetail.identify) {
        console.log("有身份认证");
        this.haveIdentify = true;
      }
      const playlistdata = await getuserplaylistAPI(this.id, 30, 0);
      // console.log(playlistdata);
      if (playlistdata.status == 200) {
        this.playlist = playlistdata.data.playlist;
        this.getPlaylist();
      }

      // console.log("用户歌单数据", playlistdata);
    },
    // 对用户歌单进行分类
    getPlaylist() {
      this.playlist.forEach((playlist) => {
        // console.log(playlist.creator.userId == this.id);
        if (playlist.creator.userId == this.id) {
          this.createplaylist.push(playlist);
        } else {
          this.collectplaylist.push(playlist);
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.id == undefined) {
      console.log("违法操作");
      this.$router.push({ name: "notFindPage" });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getuser();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang='less'>
.userAccount {
  position: relative;
  left: 0;
  right: 0;
  top: 70px;
  width: 100%;
  min-width: 1200px;
  //为音乐播放器留位置
  padding-bottom: 80px;
  .nav {
    position: relative;
    height: 5px;
    background-color: #9e9e9e;
  }
  .user-Info {
    width: 1200px;
    margin: 0 auto;

    .use-InfoDetail {
      margin-top: 30px;
      width: 100%;
      display: flex;
      .user-Info-avatar {
        flex-shrink: 0;
        margin-right: 20px;

        .img {
          height: 200px;
          width: 200px;
          border-radius: 100px;
          border: 1px solid rgb(197, 197, 197);
        }
      }
      .user-top-bottom {
        display: flex;
        flex-direction: column;
        .user-top {
          flex-shrink: 0;
          height: 110px;
          .nickname {
            flex-shrink: 0;
            font-size: 30px;
            font-weight: 550;
            color: rgb(70, 70, 70);
            display: block;
          }
          .user-Info-text {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 980px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgb(197, 197, 197);
            .text-right {
              display: flex;
              flex-shrink: 0;
              .level {
                display: inline-block;
                width: 40px;
                text-align: center;
                font-size: 13px;
                height: 20px;
                line-height: 20px;
                background-color: rgb(224, 221, 221);
                border-radius: 20px;
                margin-right: 5px;
              }
              .identify {
                flex-shrink: 0;
                height: 20px;
                line-height: 20px;
                display: inline-flex;
                background-color: rgb(247, 247, 247);
                border-radius: 20px;
                font-size: 10px;
                padding-right: 5px;
                img {
                  height: 20px;
                  width: 20px;
                  display: inline-block;
                }
              }

              .gender {
                flex-shrink: 0;
                margin-right: 5px;
                .icon-sexm {
                  background-color: rgb(167, 223, 255);
                  border-radius: 20px;
                  font-size: 20px;
                  color: rgb(0, 110, 255);
                }
                .icon-sexw {
                  background-color: pink;
                  border-radius: 20px;
                  font-size: 20px;
                  color: rgb(255, 86, 184);
                }
              }
            }
          }
        }
        .user-bottom {
          width: 980px;
          .about-info {
            display: flex;
            margin-bottom: 20px;
            .dynamic {
              padding-left: 30px;
              padding-right: 30px;
              text-align: center;
              border-right: 1px solid rgb(197, 197, 197);
              .number {
                font-size: 20px;
                font-weight: 500;
                color: rgb(63, 63, 63);
              }
              .name {
                font-size: 16px;
                color: rgb(146, 146, 146);
              }
            }
            .attetion {
              padding-left: 30px;
              padding-right: 30px;
              text-align: center;
              border-right: 1px solid rgb(197, 197, 197);
              .number {
                font-size: 20px;
                font-weight: 500;
                color: rgb(63, 63, 63);
              }
              .name {
                font-size: 16px;
                color: rgb(146, 146, 146);
              }
            }
            .follow {
              padding-left: 30px;
              padding-right: 30px;
              text-align: center;

              .number {
                font-size: 20px;
                font-weight: 500;
                color: rgb(63, 63, 63);
              }
              .name {
                font-size: 16px;
                color: rgb(146, 146, 146);
              }
            }
          }
          .introduction {
            width: 600px;
            font-size: 15px;
            color: rgb(65, 65, 65);
            margin-bottom: 6px;
            //解决文本换行问题
            // white-space: pre-wrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;

            .text {
              overflow: hidden;
              /*超出宽度部分的隐藏*/
              text-overflow: ellipsis;
              /*文字不换行*/
              :first-child {
                font-size: 15px;
                color: rgb(95, 95, 95);
                display: inline;
              }
              :last-child {
                font-size: 15px;
                display: inline;
                color: rgb(168, 168, 168);
              }
            }
            /* 文字展开收起效果 */
            .element {
              display: flex;
              max-height: 20px;
              overflow: hidden;
              transition: max-height 0s;
              white-space: nowrap;
            }

            :checked ~ .element {
              max-height: 2000px;
              white-space: pre-wrap;
            }

            input[type="checkbox"] {
              position: absolute;
              clip: rect(0 0 0 0);
            }

            :checked ~ .check-in {
              display: none;
            }

            :checked ~ .check-out {
              display: inline-block;
            }

            .check-out {
              display: none;
            }

            .check-in,
            .check-out {
              color: #34538b;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .User-playlist {
    display: flex;
    flex-wrap: wrap;
    .User-playlist-item {
      margin-right: 10px;
      margin-left: 10px;
      margin-top: 20px;
    }
  }
  /deep/ .el-tabs__nav-wrap::after {
    content: "";
    width: 0px;
  }
  /deep/ .is-active {
    font-size: 20px;
    font-weight: 800;
    color: #3d3d3d;
  }
  /deep/ .el-tabs__item {
    padding-left: 5px;
    padding-right: 5px;
    width: 130px;
    color: #3d3d3d;
    text-align: center;
  }
}
</style>